// useReducer
import { useReducer } from "react";
// 1. 定义reducer函数 根据不通过的 action 反馈不同的状态
function reducer (state, action) {
  // 根据不同的 action type 返回新的 state
  switch (action.type)  {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'SET':
      return action.payload
    default:
      return state
  }
}


function App() {
  // 2.在组件中调用useReducer，并传入reducer函数和状态的初始值
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <div className="App">
      {/* 调用dispatch 处理事件发生的处理对象 */}
      <button onClick={() => {dispatch({type: 'DEC'})}}>-</button>
      {state}
      <button onClick={() => {dispatch({type: 'INC'})}}>+</button>
      <button onClick={() => {dispatch({type: 'SET', payload: 30})}}>30</button>
    </div>
  );
}

export default App;
